<template>
  <div class="container">

    <h2 style="color:white ; margin-bottom: 0px; margin-top: 0px;     font-size: 18px;">工业园企业分布</h2>
    <div ref="chartContainer" style="height:300px"></div>


  </div>
</template>

<script>
import * as echarts from 'echarts';
import {
  enterpriseMonitoringCountsByIndustrialPark,
} from "@/api/largescreen/index.js";
export default {
  name: 'DLargeScreenGroup',
  data() {
    return {
      chart: null,
      chartData: [],
      currentType: 'all'
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.resizeChart);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart);
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);

      enterpriseMonitoringCountsByIndustrialPark()
        .then((res) => {
          let data = res.data
          const _charts = []
          data.forEach((element) => {

            _charts.push({ name: element.industrialParkName, value: element.total })
          })
          this.chartData = _charts
          this.chart.setOption(this.getChartOption(this.chartData));
        })


    },
    getChartOption(data) {
      const sortedData = [...data].sort((a, b) => a.value - b.value);
      const names = sortedData.map(item => item.name);
      const values = sortedData.map(item => item.value);
      const maxLabelLength = 8; // 最大显示字符数

      const formatLabel = (text) => {
        if (text.length > maxLabelLength) {
          return text.substring(0, maxLabelLength) + '...';
        }
        return text;
      };
      const colors = ['#3B82F6', '#60A5FA', '#93C5FD', '#BFDBFE', '#10B981', '#34D399', '#6EE7B7', '#A7F3D0', '#F59E0B', '#FBBF24', '#FCD34D', '#FDE68A'];
      const gradients = colors.map((color, index) => ({
        type: 'linear',
        x: 0, y: 0, x2: 0, y2: 1,
        colorStops: [{ offset: 0, color: color }, { offset: 1, color: colors[index + 1] || color }],
        global: false
      }));
      return {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' },
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          padding: 10,
          textStyle: { color: '#333' },
          formatter: (params) => `
            <div class="font-semibold">${params[0].name}</div>
            <div>企业数量: <span class="text-primary font-bold">${params[0].value.toLocaleString()}</span></div>
          `
        },
        grid: {
          top: '10%',
          left: '5%',
          right: '5%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: names,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: 'white',
            fontFamily: 'Inter, sans-serif',
            fontSize: 13,
            interval: 0,
            rotate: 15,
            margin: 10,
            formatter: formatLabel // 应用标签格式化函数
          }
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: {
            show: true,
            lineStyle: { color: '#F3F4F6', type: 'dashed' }
          },
          axisLabel: {
            color: 'white',
            fontFamily: 'Inter, sans-serif',
            formatter: (value) => (value >= 1000 ? `${(value / 1000).toFixed(1)}k` : value)
          }
        },
        series: [
          {
            name: '企业数量',
            type: 'bar',
            data: values,
            barWidth: '40%',
            itemStyle: {
              borderRadius: 4,
              color: (params) => gradients[params.dataIndex % gradients.length]
            },
            label: {
              show: true,
              position: 'top',
              distance: 5,
              color: 'white',
              fontWeight: '500',
              formatter: (params) => params.value.toLocaleString()
            },
            animationDuration: 800,
            animationEasing: 'cubicInOut'
          }
        ]
      };
    },
    updateChart(type) {
      if (this.currentType === type) return;

      let filteredData = this.chartData;
      if (type === 'top5') {
        filteredData = [...this.chartData].sort((a, b) => b.value - a.value).slice(0, 5);
      }

      this.currentType = type;
      this.chart.setOption(this.getChartOption(filteredData));

      // 添加切换动画效果
      this.$refs.chartContainer.classList.add('animate-pulse');
      setTimeout(() => {
        this.$refs.chartContainer.classList.remove('animate-pulse');
      }, 500);
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  text-align: center;
  font-size: 18px;

}

.animate-pulse {
  animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
}
</style>